<template>
  <div class="article-list-simple">
    <div class="top">
      <div class="search">
        <input type="text" v-model="search.value" @keyup.enter="searchFn" placeholder="搜索文章">
        <Button :loading="loading" @click="searchFn"><i class="iconfont icon-sousuo" v-show="!loading"></i>搜索</Button>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="v in list" :key="v._id">
        <div class="info">
          <span class="tag" v-for="tag in v.tags" :key="tag._id">{{tag.name}}</span>
          <span class="time">{{v.createAt | formatDate}}</span>
        </div>
        <router-link :to="`/article/${v._id}`" class="title">
          <span>{{v.title}}</span>
        </router-link>
        <div class="operate-info">
          <button>
            <i class="iconfont icon-jushoucang"></i>
            <span>{{v.numbers.like}}</span>
          </button>
          <button>
            <i class="iconfont icon-pinglun"></i>
            <span>{{v.numbers.comment}}</span>
          </button>
          <button>
            <i class="iconfont icon-fenxiang"></i>
          </button>
        </div>
      </div>
    </div>
    <pager v-if="list && list.length > 9" :page="page" :count="count" @next="pageFn(1)" @prev="pageFn(-1)" />
  </div>
</template>
<script>
import Pager from '../../components/pager'

export default {
  name: 'List',
  data () {
    return {
      search: {
        value: ''
      },
      loading: true,
      list: [],
      page: 1,
      count: 10,
      tag: this.$route.query.tag || ''
    }
  },
  watch: {
    $route () {
      this.tag = this.$route.query.tag || ''
      this.getList()
    }
  },
  components: {
    Pager
  },
  created () {
    this.getList()
  },
  mounted () {
  },
  methods: {
    // 获取列表
    async getList () {
      this.loading = true
      const title = this.search.value
      const tags = this.tag
      const params = { page: this.page, tags, title }
      const {data} = await this.$http.get('/v1/article', {params})
      this.list = data.list
      this.page = parseInt(data.page)
      this.count = parseInt(data.count)
      this.loading = false
    },
    // 翻页
    async pageFn (number) {
      this.page += number
      await this.getList()
      this.$utils.scrollToTop()
    },
    searchFn () {
      this.page = 1
      this.getList()
    }
  }
}
</script>

<style>

</style>
